<template>
  <div class="window" :style="cssVars">
    <div v-if="modelValue"  class="content">
			<slot></slot>
			<img class="close pointer" :src="closeIcon" alt="" @click="clsoe">
		</div>
  </div>
</template>

<script lang="ts">
import {
  ref,
  computed,
  defineComponent,
} from "vue";

// 声明类型
const PropsType = {
  modelValue: {
    type: Boolean,
    default: false,
    require: true
  },
  width: {
    type: Number,
    default: 480,
    require: true
  }
} as const

export default defineComponent({
  name:'window',
  props: PropsType,
  components: {},
  setup(props, context) {
    //变量
    const closeIcon = require('@/assets/img/close-circle.png')
    const cssVars = computed(() => {
      return {
        "--width" : props.width+ 'px'
      }
    })

		const clsoe = ()=>{
			context.emit('update:modelValue', false)
		}

    // return
    return {
      cssVars,
			closeIcon,
			clsoe
    };
  },
  
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.window{
  width: var(--width);
	position: fixed;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	background: linear-gradient(135deg, rgba(41, 73, 102, 0.6) 0%, rgba(82, 155, 204, 0.6) 100%);
	border-radius: 12px 12px 12px 12px;
	opacity: 1;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	
	.content{
		padding: 28px;
		position: relative;
	}
	.close{
		position: absolute;
		top: 5px;
		right: 5px;
	}
}

</style>
